<template>
  <div class="home">
      <div class="home_nav">
        <div class="home_text">振涛教育考务管理后台</div>
        <div class="home_nav_righ">
           <span class="home_user">{{user}}</span>
           <span class="home_btn" @click="dialogVisible = true">修改密码</span>
          <span class="home_out" @click="out">退出</span>
        </div>
      </div>
      <div class="home_buttom">
        <div class="home_tt">
          <div class="hoem_buttom_left">
             <el-menu :default-active="defaultActive" class="el-menu-vertical-demo" style="height: 100%">
         
          <div v-for="item in nav" :key="item.index">
            <el-submenu v-if="item.sub.length"  :index="item.index" >
              <template slot="title">
                <i :class="item.icon"></i><span>{{item.title}}</span>
              </template>
              <el-menu-item @click="jumpUrl(k.path,item.title+' / '+k.name)" v-for="k in item.sub" :index="k.index" :key="k.index">{{k.name}}</el-menu-item>
            </el-submenu>

            <el-menu-item  @click="jumpUrl(item.path,item.title)" v-else  :index="item.index">
              <i :class="item.icon"></i>
              <span slot="title">{{item.title}}</span>
            </el-menu-item>
          </div>
        </el-menu>
          </div>
          <div class="hoem_buttom_right">
            <div class="hoem_buttom_right_brea">
               <el-breadcrumb>
                    <el-breadcrumb-item >{{breadcrumb.name}}</el-breadcrumb-item>
                  </el-breadcrumb>
            </div>
               <router-view/>
        </div>
        <el-dialog
          title="修改密码"
          :visible.sync="dialogVisible"
          width="30%">
          <li class="home_mypwd"><el-input placeholder="请输入原始  密码" v-model="ypwd" show-password prefix-icon="el-icon-lock"></el-input></li>
          <li class="home_mypwd"><el-input placeholder="请输入新的  密码" v-model="npwd" show-password prefix-icon="el-icon-lock"></el-input></li>
          <li class="home_mypwd"><el-input placeholder="请重复输入新密码" v-model="npwd2" show-password prefix-icon="el-icon-lock"></el-input></li>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="setpwd">确 定</el-button>
          </span>
        </el-dialog>
        </div>
      </div>
  </div>
</template>

<script>
import loginVue from './login.vue'
  export default {
      data(){
        return{
           defaultActive:'1',
           ypwd:"",
           npwd:"",
           npwd2:"",
           user:"",
           setTime:null,
            breadcrumb:{
              name:'用户管理'
            }
            ,
           nav:[],
            dialogVisible: false
        }
      },
      watch:{$route(to,from){this.changeUrl(to.path)}},
      methods: {
        out(){
            this.$httpAxios(this.$api.OUT(),res=>{
              if(res.code!==1){
                this.$message({
                message: '退出失败',
                type: 'warning'
              });
                return 
              }
                this.$message({
                message: '退出成功',
                 type: 'success'
              });
              clearInterval(this.setTime)
              sessionStorage.clear()
               this.$router.push('/login')
            })
        },
         changeUrl(defaultUrl){
          this.nav.forEach(item=>{
            if(item.path === defaultUrl){
              this.defaultActive = item.index
              this.breadcrumb.name = item.title
              return 
            }
            item.sub?item.sub.forEach(jtem=>{
                if(jtem.path === defaultUrl){
                    this.defaultActive = jtem.index
                    this.breadcrumb.name = item.title+' / '+ jtem.name
                }
            }):null
          })
      },
       jumpUrl(path,name){
         this.$router.push(path)
         this.breadcrumb = {name}
      },
        getreme(list){
          let i=1
          let s=1
          let data = [];
          list.forEach((item,s)=> {
              let subMenu = {
                key: item.key,
                name: item.menuName,
                path: item.path,
                index:i+"-"+s
              }
              
              let index = data.findIndex(k => k.smenuTitle===item.menuTitle)
              if(index !== -1) { 
                data[index].sub.push(subMenu)
                s++
                return 
              }
              let menu = {
                index: "" + i,
                smenuTitle:item.menuTitle,
                title:item.menuName===""?item.menuTitle:item.menuTitle,
                path:item.menuName===""?item.path:"",
                icon:item.menuIcon,
                sub: [subMenu]
              }
              i++
              data.push(menu)
            })
          return data
        },
         setpwd(){
           let {ypwd,npwd,npwd2}=this
             if(!ypwd){
              this.$message({
                message: '请输入原密码',
                type: 'warning'
              });
              return
           }
           if(!npwd){
              this.$message({
                message: '请输入新密码',
                type: 'warning'
              });
              return
           }
           if(!npwd2){
              this.$message({
                message: '请重复输入新密码',
                type: 'warning'
              });
              return
           }
           if(npwd!==npwd2){
             this.$message({
                message: '两次新密码不正确',
                type: 'warning'
              });
              return
           }
           this.$httpAxios(this.$api.CHANGEPASSWOR({userid:sessionStorage.userid,oldpassword:ypwd,newpassword:npwd2}),res=>{
              if(res.code===1){
                 this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                clearInterval(this.setTime)
                this.dialogVisible = false
                this.ypwd="";
                this.npwd=""
                this.npwd2=""
                 this.$router.push('/login')
              }             
            })
           
        },
        colorset(){
          let test=document.querySelector(".home_text")
          test.style.backgroundImage=`-webkit-linear-gradient(left,${this.$randomcolor(0)},${this.$randomcolor(0)},${this.$randomcolor(0)})`
        }
      },
      //修改密码
     
    mounted() {
      if(this.$route.path==='/classsituation'){
        this.breadcrumb={
          name:"班级管理/班级情况"
        }
        this.defaultActive='4-5'
      }
      this.user=sessionStorage.user
         this.$httpAxios(this.$api.RMENU(),res=>{
           let a=this.getreme(res.data)
           a.forEach((item,n)=>{
             if(item.sub.length==1){
               item.sub=""
               return
             }
            item.sub.forEach((tem,j)=>{
                tem.key=item.index+"-"+(j+1)
             })
           })
              this.nav=a
              this.changeUrl(this.$route.path)
            })
          this.setTime =setInterval(()=>{
            this.colorset()
          },1000)
      },
  }
  
</script>
<style scoped>
  .home{
  min-width: 1400px;
   width: 100%;
   height: 100vh;
   position: relative;
   left: 0;
   top: 0;
   min-height: 680px;
  }
  .hoem_buttom_right_brea{
    padding-bottom: 30px;
    box-sizing: border-box;
  }
  .home_tt{
    width: 95%;
    height: 90%;
    background:  #fff;
    margin: 30px auto;
    min-width: 820px;
  }
  .home_text{
    font-size: 30px;
    font-weight: 1000;
    font-family: "webfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    /* background-image:-webkit-linear-gradient(left,red,rgb(235, 252, 6),pink); */
    -moz-osx-font-smoothing: grayscale;
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
  }
  .home_nav{
    width: 100%;
    height: 60px;
    background: #001529 ;
    color: #fff;  
    position: absolute;
    justify-content: space-between;
    padding: 0 50px;
    box-sizing: border-box;
    align-items: center;
    display: flex;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .home_user{
    padding-right: 20px;
  }
  .home_btn{
    border-left: 3px solid #fff;
    padding-right: 20px;
    padding-left: 20px;
  }
  .home_out{
    padding-left: 20px;
    border-left: 3px solid #fff;
  }
  .home_buttom{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    padding-top: 60px;
    box-sizing: border-box;
    left: 0;
    background: #F0F2F5;
  }
  .hoem_buttom_left{
    height: 100%;
    width: 20%;
    float: left;
    overflow-y: scroll;
  }
  ::-webkit-scrollbar{
    width:0px;
  }
  .hoem_buttom_right{
    padding-right: 30px;
    height: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
    box-sizing: border-box;
    float: left;
    width: 80%;
    overflow: auto;
  }
  .home_mypwd{
    height: 50px;
  }
@font-face {
  font-family: "webfont";
  font-display: swap;
  src: url('webfont.eot'); /* IE9 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('webfont.woff2') format('woff2'),
  url('webfont.woff') format('woff'), /* chrome、firefox */
  url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}
</style>
